<template>
  <div class="top-header">
    <div class="left">
      <i class="iconfont icon-zhankaicaidan close" :class="{ 'icon-shouqicaidan': collapse === false }"
        @click="showMenu(collapse)"></i>
      <span class="title">后台管理系统</span>
    </div>
    <div class="right">
      <el-dropdown class="my-things">
        <img src="http://p1.music.126.net/iqAGs6WGQ7kYxbvCiF0GBA==/109951168521352680.jpg?param=300y300" />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出登录</el-dropdown-item>
          <el-dropdown-item>通用设置</el-dropdown-item>
          <el-dropdown-item>我的信息</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <i class="iconfont icon-quanping full-screen" :class="{ 'icon-cancel-full-screen': fullSreenFlag === true }"
        @click="requestFullScreen">
        <span v-if="!fullSreenFlag">全屏展示</span>
        <span v-else>取消全屏</span>
      </i>
    </div>
  </div>
</template>
<script>
import screenfull from 'screenfull'
export default {
  name: 'myHeader',
  data () {
    return {
      collapse: false,
      fullSreenFlag: false
    }
  },
  methods: {
    showMenu (collapse) {
      this.collapse = !collapse
      this.$bus.$emit('changeCollapse', this.collapse)
    },
    requestFullScreen () {
      screenfull.toggle().then(() => {
        this.fullSreenFlag = !this.fullSreenFlag
      })
    }
  }
}
</script>

<style scoped lang="less">
.top-header {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.left {
  flex: 0 0 150px;
}

.close {
  cursor: pointer;
  margin-right: 10px;
  margin-left: 10px;
  font-weight: normal;
}

.center {
  flex: 1;
  font-weight: normal;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  text-align: center;

  .el-icon-arrow-left,
  .el-icon-arrow-right {
    cursor: pointer;
    flex: 0 0 30px;
    font-weight: bold;
    :hover {
      color: #67c23a;
    }
  }

  .tag-content {
    overflow: scroll;
  }

  .tag {
    margin-right: 5px;
  }
}

.right {
  display: flex;
  align-items: center;
  flex: 0 0 140px;

  .full-screen {
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
    padding-right: 10px;
  }

  .my-things {
    width: 35px;
    height: 35px;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;

    img {
      width: 100%;
      border-radius: 50%;
      border: 2px solid black;
      box-sizing: border-box;
    }
  }
}
</style>
